<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>知识库</title>
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
<script type="text/javascript" src="../three.js"></script>
<script type="text/javascript" src="../fonts/helvetiker_bold.typeface.js"></script>
<script type="text/javascript" src="../fonts/helvetiker_regular.typeface.js"></script>
<script type="text/javascript" src="../RequestAnimationFrame.js"></script>
<style type="text/css">

	body {
		margin: 0;
	}

</style>
</head>
<body>
 
 	<div id="container" style="width:100%; height:100%; overflow:hidden; position:absolute; background-color:#FFFFFF"></div>
 
</body>
<script type="text/javascript">

	var renderer = null;
	var scene = null;
	var camera = null;
	var mesh = null;
	var light = null;
	var t = 0;
	
	$(document).ready(function() {

		// 抓取Canvas容器的div标签
		var container = document.getElementById("container");
		
		// 创建Three.js渲染器，并添加到div标签中
		renderer = new THREE.WebGLRenderer( { antialias: true} );
		renderer.setSize(container.offsetWidth, container.offsetHeight);
		container.appendChild(renderer.domElement);
		
		// 创建场景
		scene = new THREE.Scene();
		
		// 创建相机，并添加到场景中
		camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 4000);
		camera.position.set(0, 0, 5);
		
		light = new THREE.DirectionalLight(0xFFFFFF, 1.0, 0);
		light.position.set( 0, 0, 3.3333 );
		scene.add(light);
		
		var mapUrl = "../images/4242.jpg";
		var map = THREE.ImageUtils.loadTexture(mapUrl);
		var material = new THREE.MeshPhongMaterial({ map: map });
		
		drawer1 = new Drawer("EAS", 0.6, 1, 0, material);
		//alert(drawer1.getObjectScreenPosition(drawer1));
		//drawer2 = new Drawer("JAVA", -0.6, 1, 0, material);
		/* drawer1 = new Drawer(-1.8, 1, 0, material);
		drawer2 = new Drawer(-0.6, 1, 0, material);
		drawer3 = new Drawer(0.6, 1, 0, material);
		drawer4 = new Drawer(1.8, 1, 0, material);
		
		drawer5 = new Drawer(-1.8, 0.3, 0, material);
		drawer6 = new Drawer(-0.6, 0.3, 0, material);
		drawer7 = new Drawer(0.6, 0.3, 0, material);
		drawer8 = new Drawer(1.8, 0.3, 0, material);
		
		drawer9 = new Drawer(-1.8, -0.4, 0, material);
		drawer10 = new Drawer(-0.6, -0.4, 0, material);
		drawer11 = new Drawer(0.6, -0.4, 0, material);
		drawer12 = new Drawer(1.8, -0.4, 0, material);

		drawer13 = new Drawer(-1.8, -1.1, 0, material);
		drawer14 = new Drawer(-0.6, -1.1, 0, material);
		drawer15 = new Drawer(0.6, -1.1, 0, material);
		drawer16 = new Drawer(1.8, -1.1, 0, material); */

		
		run();

		var pos = drawer1.getObjectScreenPosition(drawer1);
		alert(pos.x);
	});
	
	function run() {

		renderer.render(scene, camera);
		/* t++;
		var x=Math.cos(Math.PI*t/180)*10;
	    var y=Math.sin(Math.PI*t/180)*10;
	    camera.position.x=x;
	    camera.position.z=y;
	    camera.lookAt({x:x/10,y:0,z:y/10});
	    light.position.x=x;
	    light.position.z=y; */
		//camera.position.x = Math.cos(t/100);
		//camera.position.x += 0.06;
		//camera.rotation.y += 0.01;
		//camera.position.y += 0.001;
		//camera.position.z = Math.cos(t/100);
		
		/* camera.position.x += 0.02;
		if(camera.position.x >= 1) {
			camera.position.x -= 0.02;
		}
		camera.position.y += 0.01; */
		
		//bottomMesh.rotation.x += 0.01;
		//bottomMesh.rotation.y += 0.01;
		//leftMesh.rotation.y += 0.01;
		//rightMesh.rotation.y += 0.01;
		//behindMesh.rotation.x += 0.01;
		//behindMesh.rotation.y += 0.01;
		
		requestAnimationFrame(run);
	}
	
	
	// 抽屉
	Drawer = function(text, x, y, z, material) {
		
		this.rightMesh = null;
		this.bottomMesh = null;
		this.behindMesh = null;
		this.frontMesh = null;
		this.textMesh = null;
		
		var group = new THREE.Object3D();
		
		this.leftMesh = bottomMesh = new THREE.Mesh(
				new THREE.CubeGeometry(1, 0.01, 1),                
				material 
			);
		group.add(bottomMesh);
		bottomMesh.position.set(x, y, z);
		
		leftMesh = new THREE.Mesh(
				new THREE.CubeGeometry(0.01, 0.5, 1),                
				material 
			);
		group.add(leftMesh);
		leftMesh.position.set(x-0.5, y+0.25, z+0);
		
		rightMesh = new THREE.Mesh(
				new THREE.CubeGeometry(0.01, 0.5, 1),                
				material 
			);
		group.add(rightMesh);
		rightMesh.position.set(x+0.5,y+0.25,z+0);
		
		behindMesh = new THREE.Mesh(
				new THREE.CubeGeometry(1, 0.5, 0.01),                
				material 
			);
		group.add(behindMesh);
		behindMesh.position.set(x+0, y+0.25, z-0.4);
		
		frontMesh = new THREE.Mesh(
				new THREE.CubeGeometry(1.2, 0.7, 0.01),                
				material 
			);
		group.add(frontMesh);
		frontMesh.position.set(x+0, y+0.35, z+0.5);
		
		var textMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: true } );
		textMesh = new THREE.Mesh(
				new THREE.TextGeometry(text, {
					size: 0.2,
					height: 0.02,
					font: "helvetiker"
				}), textMaterial);
		group.add(textMesh);
		
		group.position.set(x+0, y+0.35, z+0.5);
		scene.add(group);
		
		//alert(textMesh.width);
		textMesh.position.set(x-0.25, y+0.25, z+0.5);
	}
	
	Drawer.prototype.getObjectScreenPosition = function(object)
	{	
		//var mat = object.matrixWorld;
		/* var pos = object.position;
		pos = pos.clone(); */
		var mat = object.matrixWorld;
		var pos = new THREE.Vector3();
		pos = mat.multiplyVector3(pos);
		
		var projector = new THREE.Projector();  
		  
		var vector = projector.projectVector(pos, camera);  
		  
		
		var eltx = (1 + vector.x) * $("#container").width() / 2;
		var elty = (1 - vector.y) * $("#container").height() / 2;
		
		var offset = $(renderer.domElement).offset();
		eltx += offset.left;
		elty += offset.top;
		return {x:eltx,y:elty};
		/* var halfWidth = window.innerWidth / 2;  
		var halfHeight = window.innerHeight / 2;  
		  
		var result = {  
		  
		    x: Math.round(vector.x * halfWidth + halfWidth),  
		    y: Math.round(-vector.y * halfHeight + halfHeight)  
		  
		};   */
		return result;
	}
	
	
	Drawer.prototype.getObjectScreenPosition1 = function(object)
	{	
		var projector = new THREE.Projector();

		//camera.position.set(0,0,10000);
		var world_vector = new THREE.Vector3(0.6, 0, 1);

		var vector = projector.projectVector(world_vector.getPositionFromMatrix(object.matrixWorld), camera);

		var halfWidth = window.innerWidth / 2;
		var halfHeight = window.innerHeight / 2;

		var result = {

			x: Math.round(vector.x * halfWidth + halfWidth),
			y: Math.round(-vector.y * halfHeight + halfHeight)

		};
		return result;
	}
	
	
</script>
</html>